import { Form, FormikProvider, useFormik } from "formik"
import * as Yup from "yup"
import { BsCheck } from "react-icons/bs"
import { Button, CardText } from "reactstrap"
import FileUploaderSingle from "../../fileUploader/FileUploaderSingle"
const SUPPORTED_FORMATS = [
  "image/jpg",
  "image/jpeg",
  "image/png",
  "application/pdf"
]

const paymentInfo = [
  {
    description: ` By your electronic signature of this form, you authorize charges to your credit
    card through Stripe via SimplePractice for services rendered. These charges will
    appear on your bank/credit card statement as [STATEMENT DESCRIPTOR]. You
    have the right to request a paper copy of this document.
    `
  },
  {
    description: `I authorize [CUSTOMER BUSINESS NAME] to charge my credit card through Stripe.
    [OPTIONAL CANCELLATION POLICY:I also agree that my credit card can be
    charged for any session that is not cancelled at least 48 hours prior to the
    scheduled session].
    .
    `
  },
  {
    description: `I understand that this authorization will remain in effect until I cancel it in writing,
    and I agree to notify [BUSINESS NAME] in writing of any changes in my account
    information or termination of this authorization.
    `
  },
  {
    description: `I certify that i am an authorized user of this credit card and will not dispute these
    scheduled transactions with my bank or credit card company as long as the
    transactions correspond to the terms indicated in this authorization form.I
    acknowledge that credit card transactions could be linked to Protected Health
    Information.
    `
  }
]

const PaymentInfo = () => {
  const SignatureValidation = Yup.object().shape({
    SignatureImage: Yup.mixed()
      .test("fileSize", "File size is too large!", (value) => {
        if (value) {
          return value.size < 2 * 1024 * 1024
        }
        return true
      })
      .test("fileFormat", "File format is not supported!", (value) => {
        if (value) {
          return SUPPORTED_FORMATS.includes(value.type)
        }
        return true
      })
  })

  // formik hook
  const formik = useFormik({
    initialValues: {
      SignatureImage: ""
    },
    validationSchema: SignatureValidation,
    enableReinitialize: true,
    onSubmit: (values) => {
      if (isObjEmpty(formik.errors)) {
        const data = { ...values }
        console.lop("formik data submission: ", data)
        // dispatch(handleAddClient(data))
      }
    }
  })
  return (
    <div className="fs-11 py-2 px-2">
      {paymentInfo.map(({ description }) => (
        <CardText className="fs-12 " >{description}</CardText>
      ))}

      <FormikProvider value={formik}>
        <Form onSubmit={formik.handleSubmit}>
          <FileUploaderSingle
            Signature
            onChange={(file) => formik.setFieldValue("SignatureImage", file)}
            file={formik.values.SignatureImage}
            touch={formik.touched.SignatureImage}
            error={formik.errors.SignatureImage}
          />
          <div className="float-right">
            <Button
              size="sm"
              className="reqbgColor m-2 float-right mt-0 "
              type="submit"
            >
              <BsCheck className="check-icon" />
              Submit & Continue
            </Button>
          </div>
        </Form>
      </FormikProvider>
    </div>
  )
}

export default PaymentInfo
